@import 'styles/settings';
@import 'styles/ui.module';

$esri-calcite-styles-correction: 15px;
.zoomComponent {
  position: absolute;
  top: calc(#{$nav-bar-height} - #{$esri-calcite-styles-correction});
  right: calc(#{$site-gutter} - #{$esri-calcite-styles-correction});
  display: flex;
  flex-direction: column;
  background-color: $elephant;
  border-radius: 2px;
}

.zoomButton {
  align-items: center;
  display: flex;
  height: $widget-button-size;
  justify-content: center;
  padding: 0;
  width: $widget-button-size;

  &:hover svg {
    fill: $robins-egg-blue;
  }

  svg {
    fill: $white;
  }
}

.spacer {
  background-color: $white;
  height: 0.5px;
  opacity: 0.5;
  margin: auto;
  width: 16px;
}

@media print {
  .zoomComponent {
    display: none;
  }
}